<template>
	<view>
		<!-- <view class="moudle_List">
			<view :class="seletedMoudelId===index?['selectMoudel','items']:'items'" v-for="(item,index) in moudleList" :key="index" @click="handleMoudel(index)">
				<image :src="item.img" mode=""></image>
				<p>{{item.name}}</p>
			</view>
		</view> -->
		<view class="cu-card case introduceList margin-top">
			<view class="cu-item shadow introduceitem" :class="seletedMoudelId===index?'selectMoudel':''" v-for="(item,index) in 4" :key="index" @click="handleMoudel(index)">
				<view class="image" style="flex:1;">
					<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"
					 mode="aspectFill" style="height: 350rpx;"></image>
					<view class="cu-tag bg-red" v-if="index===0">热门</view>
					<view class="cu-bar bg-shadeBottom"> <text class="text-cut"></text></view>
				</view>
				<view class="cu-list">
					<view class="cu-item">
						<view class="content padding">
							<view class="text-cut text-bold">模板{{index+1}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="padding-xl">
			<button class="cu-btn block bg-theme margin-tb-sm lg text-white" @tap="handleShare">
				<text class="cuIcon-share text-white"></text> 合成</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			name:'shopQrcode'
			return {
				moudleList:[
					{
						name:'模块一',
						img:'http://img0.imgtn.bdimg.com/it/u=3484443056,3637330532&fm=26&gp=0.jpg'
					},
					{
						name:'模块二',
						img:'http://img0.imgtn.bdimg.com/it/u=3484443056,3637330532&fm=26&gp=0.jpg'
					},
					{
						name:'模块三',
						img:'http://img0.imgtn.bdimg.com/it/u=3484443056,3637330532&fm=26&gp=0.jpg'
					},
					{
						name:'模块四',
						img:'http://img0.imgtn.bdimg.com/it/u=3484443056,3637330532&fm=26&gp=0.jpg'
					}
				],
				seletedMoudelId:0
			}
		},
		methods: {
			handleMoudel(index){
				this.seletedMoudelId = index
			},
			handleShare(){
				uni.showToast({
					icon:'loading',
					title:'合成中。。。',
					success: () => {
						
					}
				})
				let selectMoudel = this.moudleList[this.seletedMoudelId]
				// console.log('selectMoudel',selectMoudel)
			}
		}
	}
</script>

<style lang="scss" scoped>
.moudle_List{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 4%;
	.items{
		width: 40%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20upx;
		margin-bottom: 30upx;
		border: 1px solid #e1e1e1;
		border-radius: 10upx;
		image{
			width: 100%;
			height: 300upx;
		}
	}
}
.selectMoudel{
	box-shadow: 0  0 20upx 5upx $color-main;
}

.introduceList{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	.introduceitem{
		width: 42%;
		height: 450rpx;
	}
}
</style>
